<template>
  <el-dialog
    :model-value="KpiDialogVisible"
    :title="title"
    align-center
    draggable
    width="45%"
    style="border-radius: 10px; padding: 5px 10px"
  >
  <div style="color:red;">*请按照升序添加规则</div>
    <el-form :model="form" label-width="120px" :rules="rules">
      <el-form-item label="条目名称">
        <el-input v-model="form.name" style="width: 550px" />
      </el-form-item>
      <el-form-item label="提成条目" >
        <el-col :span="11">
          <el-input
            v-model="form.target1"
            style="width: 220px"
            placeholder="请填写提成条目一"
          />
        </el-col>
        <el-col :span="2" class="text-center" v-show="form.type==1">
          <span class="text-gray-500">-</span>
        </el-col>
        <el-col :span="11">
          <el-input
            v-model="form.target2"
            style="width: 220px"
            placeholder="请填写提成条目二"
          />
        </el-col>
      </el-form-item>
      <el-form-item label="提成模版">
        <el-select
        style="width: 250px"
          v-model="form.type"
          placeholder="请选择提成模版"
        >
          <el-option
            v-for="(item, index) in template"
            :label="item.name"
            :key="index"
            :value="item.id"
          >
            {{ item.name }}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-show="form.type"
        v-for="(item, index) in form.percentList"
        :key="index"
        :label="'提成规则' + (index + 1)"
        :prop="'percentList.' + index + '.value'"
      >
        <div v-show="form.type==1">
          {{ form.target1 }}&gt;
          <el-input
            v-model="item.rulePercent"
            style="width: 120px"
            placeholder="条目二的百分比"
          />
          %{{ form.target2 }}
        </div>
        <div>
          获得<el-input
            v-model="item.resultPercent"
            style="width: 120px"
            placeholder="结算百分比"
          />
          %{{ form.target1 }}
        </div>
        <div v-show="form.type==1">
          <el-button
            @click.prevent="removeDomain(item)"
            type="primary"
            icon="Minus"
            circle
            style="margin-left: 20px"
          />
        </div>
        <div v-show="form.type==1">
          <el-button
          @click="addDomain(index + 2)"
          type="primary"
          icon="Plus"
          circle
          style="margin-left: 20px"
        />
        </div>
      </el-form-item>
      <el-form-item label="是否启用">
        <el-switch v-model="form.state" />
      </el-form-item>
      <el-form-item label="备注说明" class="ins">
        <el-input v-model="form.ins" type="textarea" style="width: 550px" />
      </el-form-item>
      <el-form-item>
        <el-button style="width: 200px" type="primary" @click="submitForm"
          >创建</el-button
        >
        <el-button style="width: 200px" @click="onClose">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted, reactive, defineProps, defineEmits, watch } from "vue";
import { getCurrentInstance} from 'vue'
import { addRule, updatetRule ,getKpiPercent} from "@/api/kpi";
import { getFourthCeoList, addKpiRule } from "@/api/api";
import { ElMessage } from "element-plus";
const form = reactive({
  id: "",
  name: "",
  target1: "",
  target2: "",
  type:null,
  percentList: [
    /*{
      id: "",
      kpiId: "",
      kpiKey: 1,
      rulePercent: "",
      resultPercent: "",
    },*/
  ],
  state: "",
  ins: "",
});

const KpiDialogVisible = ref(true);
const props = defineProps({
  KpiDialogVisible: {
    type: Boolean,
    required: true,
  },
  close: {
    type: Function,
    default: () => {},
  },
  update: {
    type: Function,
    default: () => {},
  },
  selectContent: {
    type: Object,
    required: true,
  },
  type: {
    type: String,
    required: true,
  },
  title: {
    type: String,
    required: true,
  },
});
watch(props, (newValue, oldValue) => {
    form.id = newValue.selectContent.id;
    form.name = newValue.selectContent.name;
    form.target1 = newValue.selectContent.target1;
    form.target2 = newValue.selectContent.target2;
    form.ins = newValue.selectContent.ins;
    form.type=newValue.selectContent.type;
    form.percentList=[]
    if(props.type=='edit'){
      form.state = newValue.selectContent.state == 1 ? true : false;
      let kpiId=newValue.selectContent.id
        getKpiPercent({kpiId}).then(data=>{
          form.percentList=data.data;
        })
    }
    if(props.type=='add'){
      form.state = newValue.selectContent.state;
      form.percentList[0]={
        id: "",
        kpiId: "",
        kpiKey: 1,
        rulePercent: "",
        resultPercent: "",
      }
    }
});

const template=[
  {
    id:1,
    name:"模版一"
  },
  {
    id:2,
    name:"模版二"
  }
]

const { proxy } = getCurrentInstance()
const onClose = () => {
  props.close();
};

const removeDomain = (item) => {
  const index = form.percentList.indexOf(item);
  if (index !== -1) {
    form.percentList.splice(index, 1);
  }
};

const addDomain = (index) => {
  form.percentList.push({
    id: "",
    kpiId: form.id,
    kpiKey: index,
    rulePercent: "",
    resultPercent: "",
  });
};

const submitForm = () => {
  if (props.type == "add") {
    addRule(form).then((data) => {
      if (data.code == 200) {
        ElMessage({
          message: "新增成功",
          type: "success",
        });
        props.close();
        props.update();
        clear();
      } else {
        ElMessage.error("新增失败");
      }
    });
  } else if (props.type == "edit") {
    updatetRule(form).then((data) => {
      if (data.code == 200) {
        ElMessage({
          message: "编辑成功",
          type: "success",
        });
        props.close();
        props.update();
      } else {
        ElMessage.error("编辑失败");
      }
    });
  }
};
</script>
<style lang="scss" scoped >
::v-deep .el-form-item__label:before {
  content: "* ";
  color: red;
}
.ins {
  ::v-deep .el-form-item__label:before {
    content: " ";
  }
}
</style>